<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { Dialog } from '@/components/Dialog'
import { ElButton } from 'element-plus'
import { Table } from '@/components/Table'
import { useTable } from '@/hooks/web/useTable'
import { ViewData } from '@/api/types/userType'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { ref, unref, reactive } from 'vue'
import Edit from './components/Edit.vue'
import Detail from './components/Detail.vue'
import api from '@/api'
defineOptions({
    name: 'schoolCategory'
})
const { addCourseLatitude,modifyCourseLatitude,
    deleteCourseLatitude,getCourseLatitudes,getTestItems
} = api
const { register, tableObject, methods } = useTable<ViewData>({
    getListApi:async()=>{
        const res = await getCourseLatitudes()
        return {data:{content:res.data,totalElements:res.data.length}}
    },
    delListApi: (param) => {
        return deleteCourseLatitude({ ids: param })
    },
    response: {
        list: 'content',
        total: 'totalElements'
    }
})

const { getList, setSearchParams } = methods
const testItemList=ref([]);
const crudSchemas = reactive<CrudSchema[]>([
    {
        field: 'index',
        label: '序号',
        type: 'index',
        form: {
            show: false
        },
        detail: {
            show: false
        }
    },
    {
        field: 'name',
        label: '名称', search: { show: true },
        form: { colProps: { span: 24 } },
        detail: { span: 2, width: 100 }
    },{
        field:"testItemName",
        label:"评测项",
        form:{show:false}
    },{
        field:"testItemId",
        label:"评测项",
        table:{show:false},
        form:{
            colProps:{span:24},
            component:"TreeSelect",
            componentProps:{
                data: testItemList,
                props: { label: 'name', value: 'id' },
                checkStrictly: true,
                renderAfterExpand: false
            },
        
        }
    },

    {
        field: 'action',width: '160px',label: '操作',
        form: {show: false},
        detail: {show: false}
    }
])

const { allSchemas } = useCrudSchemas(crudSchemas)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const pageload=async()=>{
    const res = await getTestItems();
    testItemList.value = res.data
    getList()
}
pageload();
const AddAction = () => {
    dialogTitle.value = '添加'
    tableObject.currentRow = null
    actionType.value = 'add'
    dialogVisible.value = true
}

const delLoading = ref(false)

const delData = async (row: ViewData | null, multiple: boolean) => {
    tableObject.currentRow = row
    const { delList, getSelections } = methods
    const selections = await getSelections()
    delLoading.value = true
    await delList(
        multiple ? selections.map((v) => v.id) : [tableObject.currentRow?.id as string],
        multiple
    ).finally(() => {
        delLoading.value = false
    })
}
const actionType = ref('')

const action = (row: ViewData, type: string) => {
    dialogTitle.value = type === 'edit' ? '编辑' : '详情'
    actionType.value = type
    tableObject.currentRow = row
    dialogVisible.value = true
}

const writeRef = ref<ComponentRef<typeof Edit>>()

const loading = ref(false)

const save = async () => {
    const write = unref(writeRef)
    await write?.elFormRef?.validate(async (isValid) => {
        if (isValid) {
            loading.value = true
            const data = (await write?.getFormData()) as ViewData
            let apiReques = data.id ? modifyCourseLatitude : addCourseLatitude
            const res = await apiReques(data)
                .catch(() => {})
                .finally(() => {
                    loading.value = false
                })
            if (res) {
                dialogVisible.value = false
                tableObject.currentPage = 1
                getList()
            }
        }
    })
}
</script>

<template>
    <ContentWrap>
        <Search
            :schema="allSchemas.searchSchema"
            @search="setSearchParams"
            @reset="setSearchParams"
        />

        <div class="mb-10px">
            <ElButton type="primary" @click="AddAction">添加</ElButton>
            <ElButton :loading="delLoading" type="danger" @click="delData(null, true)">
                删除
            </ElButton>
        </div>

        <Table
            v-model:pageSize="tableObject.pageSize"
            v-model:currentPage="tableObject.currentPage"
            :columns="allSchemas.tableColumns"
            :data="tableObject.tableList"
            :loading="tableObject.loading"            
            @register="register"
        >
            <template #action="{ row }">
                <ElButton type="primary" @click="action(row, 'edit')"> 编辑 </ElButton>
                <ElButton type="danger" @click="delData(row, false)"> 删除 </ElButton>
            </template>
        </Table>
    </ContentWrap>

    <Dialog v-model="dialogVisible" :title="dialogTitle" max-height="180px" width="500px">
        <Edit
            v-if="actionType !== 'detail'"
            ref="writeRef"
            :form-schema="allSchemas.formSchema"
            :current-row="tableObject.currentRow"
        />

        <Detail
            v-if="actionType === 'detail'"
            :detail-schema="allSchemas.detailSchema"
            :current-row="tableObject.currentRow"
        />

        <template #footer>
            <ElButton
                v-if="actionType !== 'detail'"
                type="primary"
                :loading="loading"
                @click="save"
            >
                保存
            </ElButton>
            <ElButton @click="dialogVisible = false">关闭</ElButton>
        </template>
    </Dialog>
</template>
